<template>
    <div class="product-store">
        <white-space/>
        <wing-blank>
            <div class="store-info" @click.stop="handleRouteToStore">
                <van-image lazy-load width="48" height="48" :radius="4" :src="store.logo" v-if="store.logo"/>
                <div class="store-layout">
                    <wing-blank class="store-layout-name">
                        <span class="store-name">{{store.name}}</span>
                        <span class="store-followers"><number-count v-model="followerCount"/>人关注</span>
                    </wing-blank>
                    <van-row gutter="10" type="flex" justify="center" align="center">
                        <van-col span="12">
                            <van-button round size="small" plain type="primary" @click.stop="handleRouteToStoreProducts">全部商品</van-button>
                        </van-col>
                        <van-col span="12">
                            <van-button round size="small" type="primary" @click.stop="handleRouteToStore">进店逛逛</van-button>
                        </van-col>
                    </van-row>
                </div>
            </div>
        </wing-blank>
        <white-space/>
    </div>
</template>

<script>
  import { Button, Col, Image, Row } from "vant"
  import WingBlank from "@/components/WingBlank"
  import { follow, store as Store } from "@mall/api-services"
  import WhiteSpace from "@/components/WhiteSpace"
  import NumberCount from "@/components/NumberCount"

  export default {
    name: "ProductStore",
    components: {
      NumberCount,
      WhiteSpace,
      WingBlank,
      [Button.name]: Button,
      [Image.name]: Image,
      [Row.name]: Row,
      [Col.name]: Col,
    },
    props: {
      id: String,
    },
    data() {
      return {
        store: new Store.Store(),
        followerCount: 0,
      }
    },
    watch: {
      id: function(id, oldId) {
        if (id !== undefined && id !== oldId) {
          this.refreshStore(id)
          this.refreshStoreFollowerCount(id)
        }
      },
    },
    methods: {
      refreshStore(storeId) {
        Store.StoreServiceV1.getStore(storeId)
          .then(aStore => this.store = aStore)
      },
      refreshStoreFollowerCount(storeId) {
        follow.FollowServiceV1.getStoreFollowerCount(storeId)
          .then(count => this.followerCount = count)
      },
      handleRouteToStore() {
        const { id } = this
        this.$router.push(`/stores/${id}`)
      },
      handleRouteToStoreProducts() {
        const { id } = this
        this.$router.push(`/stores/${id}/products`)
      },
    },
  }
</script>

<style lang="scss" scoped>
    @import "../../styles/variables";

    .product-store {
        background: #fff;
    }

    .store-info {
        display: flex;

        .store-layout {
            flex: 1;
            display: flex;
            justify-content: space-between;

            .store-layout-name {
                display: inline-flex;
                flex-direction: column;
                justify-content: space-evenly;

                .store-name {
                    font-size: 14px;
                    font-weight: 700;
                }

                .store-followers {
                    font-size: 12px;
                    color: $gray-7;
                }
            }

            .store-actions {
                display: flex;
            }
        }
    }
</style>
